<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{background: #efefef;padding: 4px;}
        .box p{background: pink;padding: 4px;}
        .box span{background: red}

    </style>
</head>
<body>
    <input type="number" min="1" max="10" value="3">
    <div class="box">
        <p>段落1</p>
        <p abc="red">段落2</p>
        <span abc="red">文字</span>
        <p>段落3</p>
        <p abc="red">段落4</p>
        <span>文字</span>
        <p>段落5</p>
        <p>段落6</p>
        <span abc="red">文字</span>
        <span>文字</span>
        <p abc="red">段落7</p>
    </div>
</body>
<script>
    // var ap = document.querySelectorAll(".box p");
    // for(var i=0;i<ap.length;i++){
    //     ap[i].onclick = function(){
    //         console.log(this)
    //     }
    // }

    var obox = document.querySelector(".box")
    obox.onclick = function(eve){
        var e = eve || window.event;
        var target = e.target || e.srcElement;

        // 注意筛选事件目标的条件

        if(target.getAttribute("abc") === "red"){
            console.log(target);
        }
    }

</script>
</html>